<script setup name="AuthUser" lang="ts">
import SelectUser from './selectUser.vue'
import { allocatedUserList, authUserCancel, authUserCancelAll } from '@/api/system/role'
import type { UserQuery, UserVO } from '@/api/system/user/types'

const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'))

const userList = ref<UserVO[]>([])
const loading = ref(true)

const multiple = ref(true)
const total = ref(0)
const userIds = ref<Array<string | number>>([])

const queryFormRef = ref()
const selectRef = ref<InstanceType<typeof SelectUser>>()

const queryParams = reactive<UserQuery>({
  pageNum: 1,
  pageSize: 10,
  roleId: route.params.roleId as string,
  userName: undefined,
  phonenumber: undefined,
})

/** 查询授权用户列表 */
async function getList() {
  loading.value = true
  const res = await allocatedUserList(queryParams)
  userList.value = res.rows
  total.value = res.total
  loading.value = false
}
// 返回按钮
function handleClose() {
  router.back()
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  queryFormRef.value?.resetFields()
  handleQuery()
}
/** 打开授权用户表弹窗 */
function openSelectUser() {
  selectRef.value?.show()
}
/** 取消授权按钮操作 */
async function cancelAuthUser(row: UserVO) {
  await proxy?.$modal.confirm(`确认要取消该用户"${row.userName}"角色吗？`)
  await authUserCancel({ userId: row.userId, roleId: queryParams.roleId })
  await getList()
  proxy?.$modal.msgSuccess('取消授权成功')
}
/** 批量取消授权按钮操作 */
async function cancelAuthUserAll() {
  const roleId = queryParams.roleId
  const uIds = userIds.value.join(',')
  await proxy?.$modal.confirm('是否取消选中用户授权数据项?')
  await authUserCancelAll({ roleId, userIds: uIds })
  await getList()
  proxy?.$modal.msgSuccess('取消授权成功')
}

onMounted(() => {
  getList()
})
</script>

<template>
  <div class="p-2">
    <a-card shadow="never">
      <template #title>
        <div class="flex-between">
          <div>
            <a-form ref="queryFormRef" :model="queryParams" layout="inline">
              <a-form-item label="用户名称" prop="userName">
                <a-input v-model:value="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
              </a-form-item>
              <a-form-item label="手机号码" prop="phonenumber">
                <a-input v-model:value="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter="handleQuery" />
              </a-form-item>
              <a-form-item>
                <a-button type="primary" class="mr-10px" @click="handleQuery">
                  搜索
                </a-button>
                <a-button @click="resetQuery">
                  重置
                </a-button>
              </a-form-item>
            </a-form>
          </div>
          <div>
            <a-row :gutter="10">
              <a-col>
                <a-button v-hasPermi="['system:role:add']" type="primary" @click="openSelectUser">
                  添加用户
                </a-button>
              </a-col>
              <a-col>
                <a-button v-hasPermi="['system:role:remove']" :disabled="multiple" @click="cancelAuthUserAll">
                  批量取消授权
                </a-button>
              </a-col>
              <a-col>
                <a-button @click="handleClose">
                  关闭
                </a-button>
              </a-col>
            </a-row>
          </div>
        </div>
      </template>
      <a-table :loading="loading" :data-source="userList">
        <a-table-column title="用户名称" data-index="userName" :ellipsis="true" />
        <a-table-column title="用户昵称" data-index="nickName" :ellipsis="true" />
        <a-table-column title="邮箱" data-index="email" :ellipsis="true" />
        <a-table-column title="手机" data-index="phonenumber" :ellipsis="true" />
        <a-table-column title="状态" align="center" data-index="status">
          <template #default="{ record }">
            <dict-tag :options="sys_normal_disable" :value="record.status" />
          </template>
        </a-table-column>
        <a-table-column title="创建时间" align="center" data-index="createTime" width="180">
          <template #default="{ record }">
            <span>{{ record.createTime }}</span>
          </template>
        </a-table-column>
        <a-table-column title="操作" align="center" class-name="small-padding fixed-width">
          <template #default="{ record }">
            <a-tooltip content="取消授权" placement="top">
              <a-button v-hasPermi="['system:role:remove']" link type="primary" @click="cancelAuthUser(record)" />
            </a-tooltip>
          </template>
        </a-table-column>
      </a-table>

      <div class="text-right mt-5">
        <a-pagination
          v-show="total > 0"
          v-model:current="queryParams.pageNum" v-model:pageSize="queryParams.pageSize" :total="total"
          show-less-items @change="getList"
        />
      </div>

      <SelectUser ref="selectRef" :role-id="queryParams.roleId" @ok="handleQuery" />
    </a-card>
  </div>
</template>

<style lang="less" scoped></style>
